<style scoped>
    .layui-row {
        overflow: hidden;
    }

    .select-item {
        width: 34.333333%;
        float: left;
    }

    .layui-row:after, .layui-row:before {
        clear: none;
    }

    .layui-form >>> .layui-form-select {
        z-index: inherit;
    }
</style>

<template>
    <div class="department">
        <!--        <div style="height:50px">-->
        <!--            <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>导出excel</a>-->
        <!--        </div>-->
        <form class="layui-form ">
            <div class="layui-col-lg4 select-item" style="text-align: right;width: auto">
                <div class="layui-inline" style="width: 200px">
                    <select id="type" lay-filter="type" class="layui-form-select">
<!--                        <option value="">请选择类型</option>-->
                        <option value="1">调拨</option>
                        <option value="2">调整出库</option>
                        <option value="3">调整入库</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px;display: none;">
                    <select id="srguid" class="layui-form-select"></select>
                </div>
                <div class="layui-inline" style="width: 200px;">
                    <select id="fromsrguid" class="layui-form-select"></select>
                </div>
                <div class="layui-inline" style="width: 200px;">
                    <select id="tosrguid" class="layui-form-select"></select>
                </div>
                <div class="layui-inline" style="width: 160px" id="status"></div>
                <div class="layui-inline" style="width: 200px">
                    <input type="text" v-model="applyname" placeholder="请输入申请人" class="layui-input key">
                </div>
            </div>
            <div class="layui-col-lg4 select-item" style="text-align: left;width: auto">

                <div class="layui-inline" style="width: 200px">
                    <input type="text" id="starttime" autocomplete="off" placeholder="请选择开始时间" class="layui-input key">

                </div>
                <div class="layui-inline" style="width: 200px">
                    <input type="text" id="endtime" autocomplete="off"  placeholder="请选择结束时间" class="layui-input key">

                </div>
                <button type="button" class="layui-btn sou" @click="search">搜索</button>
                <button type="button" class="layui-btn sou" @click="exportExcel">导出excel</button>
            </div>

        </form>
        <table class="layui-table layui-form" style="height:200px">
            <thead>
            <tr>
                <th>编号</th>
                <th>{{strtype() ? '调出' : ''}}库房</th>
                <th>调出组织</th>
                <th v-show="strtype()">调入库房</th>
                <th v-show="strtype()">调入组织</th>
                <th>类型</th>
                <th v-show="strtype()">发货重量</th>
                <th v-show="strtype()">到货重量</th>
                <th v-show="strtype()">物料名称</th>
                <th v-show="strtype()">出库重量</th>
                <th v-show="strtype()">入库重量</th>
                <th v-show="strtype()">备注</th>
                <th>状态</th>
                <th>申请人</th>
                <th>申请时间</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(item, index) in afterList">
                <tr v-for="(row, i) in item" >
                    <td v-if="i === 0" :rowspan="item.length">{{row.code}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.fromsrname}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.orgname}}</td>
                    <td v-if="i === 0" :rowspan="item.length" v-show="strtype()">{{row.tosrname}}</td>
                    <td v-if="i === 0" :rowspan="item.length" v-show="strtype()">{{row.toorgname}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.typename}}</td>
                    <td v-if="i === 0" :rowspan="item.length" v-show="strtype()">{{row.loadweight}}</td>
                    <td v-if="i === 0" :rowspan="item.length" v-show="strtype()">{{row.unloadweight}}</td>
                    <td v-show="strtype()">{{row.itemname}}</td>
                    <td v-show="strtype()">{{row.itemloadweight}}</td>
                    <td v-show="strtype()">{{row.itemunloadweight}}</td>
                    <td v-show="strtype()">{{row.itemremark}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.statusname}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.applyname}}</td>
                    <td v-if="i === 0" :rowspan="item.length">{{row.createtime}}</td>
                </tr>
            </template>
            </tbody>
        </table>

        <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
    import Pagination from '../common/Pagination.vue'
    let qs = require('qs');

    export default {
        name: 'Transferapply',
        components: {Pagination},
        data() {
            return {
                departments: [],
                datas: [],
                currentPage: 1,
                rows: 10,
                totalPage: 0,
                total: 1000,
                searchName: '',
                afterList: [],
                storehouseroom: [],
                storeroom: [],
                starttime: "",
                endtime: "",
                fromsrguid: "",
                tosrguid: "",
                whoutform: [],
                exportpage: 1,
                initStatus: '',
                statusArr: [],
                applyname: '',
            }
        },
        mounted() {
            let that = this;
            this.getBaseInfo();


            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                form.on('select(storeroom)', function (data) {
                    $.each(that.storehouseroom, function (index, item) {

                        if (item.storeguid == data.value) {
                            $('#shrguid').append(new Option(item.name, item.guid));// 下拉菜单里添加元素。
                            layui.form.render("select");
                        }
                    });
                })
                form.on('select(type)', function (data) {
                    if (data.value == 1) {
                        $('#srguid').parent().hide();
                        $('#fromsrguid').parent().show();
                        $('#tosrguid').parent().show();
                    } else  {
                        $('#srguid').parent().show();
                        $('#fromsrguid').parent().hide();
                        $('#tosrguid').parent().hide();
                    }
                })
            });
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#starttime' //指定元素
                });
                //执行一个laydate实例
                laydate.render({
                    elem: '#endtime' //指定元素
                });
            });
            //状态多选
            this.getStatus();
        },
        methods: {
            // 数据转换
            tansList() {
                console.log('this.datas：', this.datas)
                this.afterList = Object.values(this.datas.reduce((temp, item) => {
                    if (temp[item.code]) {
                        temp[item.code].push(item)
                    } else {
                        temp[item.code] = [item]
                    }
                    return temp
                }, {}))
                console.log('afterList:', this.afterList)
            },
            search: function () {
                this.getPageData('search');
            },
            turnPage: function (data) {
                this.currentPage = data;
                this.exportpage = data;
                this.getPageData();
            },
            getPageData: function (type = '') {
                var that = this;

                let loader = layui.layer.load();

                let postData = {rows: that.rows};
                if (type != 'search') {
                    postData.pageNo = that.currentPage;
                }
                postData.type = $('#type').val();
                postData.fromsrguid = postData.type == 1 ? $('#fromsrguid').val() : $('#srguid').val();
                postData.tosrguid = $('#tosrguid').val();

                postData.starttime = $('#starttime').val();
                postData.endtime = $('#endtime').val();
                postData.status = this.initStatus.getValue('valueStr');
                postData.applyname = this.applyname;

                $.ajax({
                    url: '/produce/Transferapply!pagePC.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function (response) {
                        if (response.msg == 'success') {
                            let res = response.pagelist != undefined ? response.pagelist : {rows: []};
                            //分页数据赋值
                            that.currentPage = res.pageNo;
                            that.totalPage = res.pageCount;
                            that.datas = res.rows;
                            that.total = res.total;
                            that.tansList()

                        } else {
                            that.alert("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            },
            getBaseInfo: function (type = '') {
                var that = this;
                $.ajax({
                    url: '/sales/Whoutform!getBaseInfo.action?openid=' + localStorage.openid,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        console.log(res)
                        if (res.msg == 'success') {
                            let data = res;
                            that.storeroom = data.storeroom;
                            that.storehouseroom = data.storehouseroom;
                            $('#fromsrguid').append(new Option('请选择调出库房', ""));// 下拉菜单里添加元素。
                            $('#tosrguid').append(new Option('请选择调入库房', ""));// 下拉菜单里添加元素。
                            $('#srguid').append(new Option('请选择库房', ""));// 下拉菜单里添加元素。
                            $.each(data.storeroom, function (index, item) {
                                $('#fromsrguid').append(new Option(item.name, item.guid));
                                $('#tosrguid').append(new Option(item.name, item.guid));
                                $('#srguid').append(new Option(item.name, item.guid));
                            });
                            layui.form.render("select");
                        } else {
                            $.toast("系统错误", 'forbidden');
                        }
                    },
                    complete: function () {
                        layer.close();
                    }
                });
            },
            getStatus: function() {
                this.axios({
                    method: 'get',
                    responseType: 'json',
                    url: '/sales/Sellform!findDict.action',
                    params: {type: 100}
                }).then(response => {
                    if (response.statusText == "OK") {
                        this.statusArr = response.data;
                        //状态多选
                        this.initStatusSelect();
                    } else {
                        this.toastText('获取状态数据失败');
                    }
                });
            },
            initStatusSelect: function() {
                this.initStatus = layui.xmSelect.render({
                    el: '#status',
                    tips: '请选择状态',
                    name: 'status',
                    prop: {
                        name: 'dicttext',
                        value: 'dictkey'
                    },
                    data: this.statusArr
                })
            },
            compare: function (property) {
                return function (a, b) {
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            strtype: function () {
                if ($('#type').val() == 1) {
                    return true;
                } else {
                    return false;
                }
            },
            exportExcel:function (){
                let postData = {rows: this.rows};
                if (type != 'search') {
                    postData.pageNo = this.currentPage;
                }
                postData.type = $('#type').val();
                postData.fromsrguid = postData.type == 1 ? $('#fromsrguid').val() : $('#srguid').val();
                postData.tosrguid = $('#tosrguid').val();

                postData.starttime = $('#starttime').val();
                postData.endtime = $('#endtime').val();
                postData.status = this.initStatus.getValue('valueStr');
                postData.applyname = this.applyname;

                window.location.href="/produce/Transferapply!exportOrderData.action?" + qs.stringify(postData);
            },
        }
    }
</script>
